<template>
    <div class="index-container">
        <v-breadcrumb :breadcrumbData="[{name: '用户管理'}, {name: '用户提现申请'}]"></v-breadcrumb>

        <div class="search-box mb-15">
            <div class="left">
                <div class="item">
                    <span class="span">状态</span>
                    <el-select v-model="obj.status" class="width-200" placeholder="请选择" @change="getData()">
                        <el-option label="全部" :value="0"></el-option>
                        <el-option v-for="(item,index) in userApplyGoldStatuses" :key="index" :label="item.name"
                                   :value="item.id"></el-option>
                    </el-select>
                </div>
            </div>
            <div class="right">
                <el-button-group>
                    <el-button v-preventDbClick @click="getData()" type="primary" icon="el-icon-search">查询</el-button>
                    <el-button v-preventDbClick @click="reset()" type="primary" icon="el-icon-refresh">重置</el-button>
                </el-button-group>
            </div>
        </div>

        <div class="g-box" style="min-height:600px;">
            <el-table :data="list" :fit="true" stripe border :header-cell-style="{background:'#eee'}">
                <el-table-column prop="id" label="ID" width="120"></el-table-column>
                <el-table-column label="头像" width="66">
                    <template slot-scope="scope">
                        <el-image
                            style="font-size:0;width:44px;height:44px;margin:0;padding:0;position:relative;top:3px;"
                            fit="cover" :preview-src-list="[scope.row.image]" :src="scope.row.image">
                            <div slot="error" style="width:100%;height:100%;border:1px solid #eee;font-size:0;"
                                 class="image-slot color-999 font12 flex-center">暂无<br/>图片
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="nickname" label="昵称"></el-table-column>
                <el-table-column label="收款码" width="66">
                    <template slot-scope="scope">
                        <el-image
                            style="font-size:0;width:44px;height:44px;margin:0;padding:0;position:relative;top:3px;"
                            fit="cover" :preview-src-list="[scope.row.wechat_collection_code]"
                            :src="scope.row.wechat_collection_code">
                            <div slot="error" style="width:100%;height:100%;border:1px solid #eee;font-size:0;"
                                 class="image-slot color-999 font12 flex-center">暂无<br/>图片
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="real_name" label="真实姓名"></el-table-column>
                <el-table-column prop="user_gold" label="现有余额"></el-table-column>
                <el-table-column prop="gold" label="申请金额"></el-table-column>
                <el-table-column label="申请时间" width="166">
                    <template slot-scope="scope">
                        <div>{{ scope.row.c_time|formatDateTime }}</div>
                    </template>
                </el-table-column>

                <el-table-column label="状态" width="120">
                    <template slot-scope="scope">
                        <el-button v-for="(item,index) in userApplyGoldStatuses" :key="index" v-preventDbClick plain
                                   size="mini"
                                   v-if="scope.row.status==item.id" :type="item.type">{{ item.name }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="处理人" prop="check_user_name"></el-table-column>
                <el-table-column label="处理时间" width="166">
                    <template slot-scope="scope">
                        <div>{{ scope.row.check_time|formatDateTime }}</div>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" border width="140" label="操作">
                    <template slot-scope="scope">
                        <el-button v-preventDbClick size="mini" title="通过提现" @click="setAvailable(scope.row.id)"
                                   v-if="scope.row.status==1"
                                   type="success" icon="el-icon-unlock" circle></el-button>
                        <el-button v-preventDbClick size="mini" title="拒绝提现" @click="setDisable(scope.row.id)"
                                   v-if="scope.row.status==1"
                                   type="danger" icon="el-icon-lock" circle></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="clearfix"></div>
            <div class="mb-10 mt-20 t-center">
                <el-pagination background layout="total,sizes,prev,pager,next,jumper"
                               :page-size="obj.size"
                               :page-sizes="[10,20,50,100]"
                               :current-page.sync="obj.page"
                               :total="total"
                               @size-change="changeSize"
                               @current-change="changeCurrent">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script type="text/ecmascript-6">
import request from '../../common/js/request.js';
import {tool} from "../../common/js/tool.js";
import config from '../../common/js/config.js'

export default {
    data() {
        return {
            obj: {status: 0, page: 1, size: 10},
            userApplyGoldStatuses: config.userApplyGoldStatuses,
            total: 0,
            list: [],
        };
    },

    computed: {},

    created() {
        this.obj.status = !!this.$route.query.status ? Number(this.$route.query.status) : 0;
        this.getData();
    },

    methods: {
        getData(page) {
            this.obj.page = !!page ? this.obj.page : 1;
            request({
                url: '/manage/UserApplyGold/list',
                data: this.obj
            }).then((res) => {
                this.list = res.data.data;
                this.total = res.data.total;
            })
        },
        setAvailable(id) {
            this.$confirm('确定同意提现吗？', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.$confirm('确定给用户打款了吗？', "提示", {
                    confirmButtonText: "打款了",
                    cancelButtonText: "还没有",
                    type: "warning"
                }).then(() => {
                    request({
                        url: '/manage/UserApplyGold/setAvailable',
                        data: {id: id}
                    }).then((res) => {
                        tool.message(res.msg, 'success', () => {
                            this.getData(true);
                        })
                    })
                });
            });
        },
        setDisable(id) {
            this.$confirm('确定拒绝提现吗？', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                request({
                    url: '/manage/UserApplyGold/setDisable',
                    data: {id: id}
                }).then((res) => {
                    tool.message(res.msg, 'success', () => {
                        this.getData(true);
                    })
                })
            });
        },
        del(id) {
            this.$confirm('确定要删除吗？', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                request({
                    url: '/manage/user/del',
                    data: {id: id}
                }).then((res) => {
                    tool.message(res.msg, 'success', () => {
                        this.getData();
                    })
                })
            });
        },

        reset() {
            this.obj.page = 1;
            this.obj.size = 10;
            this.obj.is_certification = 0;
            this.obj.status = 0;
            this.obj.real_name = '';
            this.obj.nickname = '';
            this.getData();
        },

        changeCurrent(val) {
            this.obj.page = val;
            this.getData(true);
        },

        changeSize(e) {
            this.obj.size = e;
            this.obj.page = 1;
            this.getData();
        },

    },

};
</script>

<style lang="less" rel="stylesheet/less" scoped>
@import url("../../common/css/variable.less");
</style>
